<template>
  <div class="fdisrxy page">
    <div class="grids" @click="animateAction">
      <div class="grid" v-for="item in grids"></div>
    </div>

    <infoCard title="animate 特效" />
  </div>
</template>

<script setup>
import infoCard from "@/components/card/infoCard.vue"
import { onMounted, ref, inject } from "@vue/runtime-core";
let anime = inject("anime");
let grids = ref([]);

onMounted(() => {
  initGrids(1000);
});

function initGrids(num = 1000) {
  let list = [];
  for (let i = 0; i < num; i++) {
    list.push(i);
  }

  grids.value = list;
}

function animateAction() {
    // [100, 20]左右往复动画
    // [50, 20]径向往外动画
  //网格动画
  anime({
    targets: ".grids .grid",
    scale: [
      { value: 0.1, easing: "easeOutSine", duration: 200 },
      { value: 1, easing: "easeInOutQuad", duration: 1200 },
    ],
    delay: anime.stagger(50, { grid: [100, 20], from: "center" }),
  });
}
</script>

<style lang="scss" scoped>
.page {
  width: 100vw;
  height: 100vh;
  background-color: #252423;
}
.grids {
  display: grid;
  grid-template-columns: repeat(50, auto);
  grid-template-rows: repeat(20, auto);
}
.grid {
  width: 20px;
  height: 20px;
  margin: 2px;
  background-color: #00d672;
  cursor: pointer;
}

.grid-active {
  background-color: #00d672;
}
</style>